<template>
	<APageBar>
		<!-- <AList
			ref="scroller"
			class="list"
			:total="list.total"
			:amount="list.data.length"
			:loading="list.loading"
			@load="getList"
			auto
			
			pull
			@pullRefresh="handleRefresh"
		>
			<uni-card v-for="(item,index) in list.data" :key="index">
				<text>{{index}}这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
			</uni-card>
		</AList> -->
		<uni-card v-for="(item,index) in list.data" :key="index">
			<text>{{index}}这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
		</uni-card>
		<button @click="goTop">顶部</button>
		<button @click="handleNext">下一页</button>
	</APageBar>
</template>

<script>
	const api = ({ limit, page }) =>{
		return new Promise((resolve) => {
			let res = {
				code:200,
				data:{
					page,
					list:[1,2,3,4,5,6,7,8,9],
					total:30,
				}
			}
			setTimeout(()=>{
				resolve(res)
			},2000)
		})
	}
	export default {
		data() {
			return {
				query:{
					limit:10,
					page:1
				},
				list:{
					loading:false,
					total:0,
					data:[]
				}
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList(){
				this.list.loading = true;
				api({page:1}).then(res=>{
					this.query.page++;
					this.list = {
						loading:false,
						total: res.data.total,
						data: this.list.data.concat(res.data.list)
					}
					
				})
			},
			handleRefresh(){
				this.query.page = 1;
				this.list.data = []
				this.getList()
			},
			handleNext(){
				this.$router.push('/pages/index/indexCustom');
			},
			goTop(){
				// this.$refs.scroller.goTop()
			}
		}
	}
</script>

<style>
	.list{
		height: 100%;
		display: block;
	}
	button{
		position: absolute;
		bottom: 0;
	}
</style>
